<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui.css">
<title>学生管理</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
	function bjChange(bjId) {
		if(bjId==0){
			$('#myTable').empty();
		}else{
			$('#myTable').load('xuesheng?method=table&id='+bjId);
		}
	}
	function add() {
		window.location="xuesheng?method=add&bjId="+$('#bj').val();
	}
	function del(id) {
		if(confirm('是否要删除这条记录？')){
			window.location="xuesheng?method=delete&id="+id;
		}
	}
	function update(id) {
		window.location="xuesheng?method=update&id="+id;
	}
	function fandeng() {
		window.location="login.jsp"
	}	
	function fanzhu() {
		window.location="main?method=main"
	}	
/*$(function(){
		$( "#bj" ).selectmenu();		
	}); */ 
</script>
<style type="text/css">
	.btn{width: 115px;height: 45px;line-height: 15px;text-align: center;color: #fff;font-size: 15px;text-transform: uppercase;text-decoration: none;font-family: sans-serif;box-sizing: border-box;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 60px;z-index: 1}.btn:hover{animation: animate 8s linear infinite}@keyframes animate{0%{background-position: 0%}100%{background-position: 400%}} 
    .btn::before{content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 40px;opacity: 0;transition: 0.5s}.btn:hover::before{filter: blur(20px);opacity: 1;animation: animate 8s linear infinite}</style>

</style>
<style type="text/css">
	.push_button {
	position: relative;
	width:110px;
	height:40px;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	line-height:43px;
	font-family:'Oswald', Helvetica;
	display: block;
	margin: 30px;
}
.push_button:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}

.push_button:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:5px;
}
.push_button:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}

.red {
	text-shadow:-1px -1px 0 #A84155;
	background: #D25068;
	border:1px solid #D25068;
	
	background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
	background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
	background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
	background-image:-o-linear-gradient(top, #F66C7B, #D25068);
	background-image:linear-gradient(to bottom, #F66C7B, #D25068);
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
	background: #F66C7B;
	background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
	background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
	background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
	background-image:-o-linear-gradient(top, #D25068, #F66C7B);
	background-image:linear-gradient(top, #D25068, #F66C7B);
}

.blue {
	text-shadow:-1px -1px 0 #2C7982;
	background: #3EACBA;
	border:1px solid #379AA4;
	background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:linear-gradient(top, #48C6D4, #3EACBA);
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
	background: #48C6D4;
	background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
</style>
<style type="text/css">
	tble,th{
		border: 1px solid;
	}
	table{
		border-collapse: collapse;
		margin: auto;
	}
	td{
		width: 150px;
		height: 80px;
		text-align: center;
}
	body {
	
	 height: 700px;
 	 background-image: linear-gradient(45deg, #00FFFF , #FFEBCD 60%); 
}
</style>

</head>
<body>
<div class="aaa">
	<p>	
	<label>班级：</label>
	<select id="bj" onchange="bjChange(this.value)" >
		<option value="0" >请选择班级</option>
		<c:forEach items="${bjs}" var="bj">
			<option value ="${bj.id }">${bj.name}</option>
		</c:forEach>	
	</select>
	
	</p>
<div id="myTable">
		<c:if test="${bjId!=null}">
			<button type="button" onclick="add()" class="push_button red">新增</button>
			<table border="1">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>密码</th>
					<th colspan="2">操作</th>
				</tr>
				<c:forEach items="${students}" var="s">
					<tr>
						<td>${s.stuNo}</td>
						<td>${s.name}</td>
						<td>${s.password}</td>
						<td><button type="button" onclick="update(${s.id})" class="push_button red">修改</button></td>
						<td><button onclick="javascript:del(${s.id})" class="push_button blue">删除</button></td>
				</tr>
				
				</c:forEach>
				
			</table>
		</c:if>
	<div class="bbb">
	<button onclick="fandeng()" class="btn">返回登录页面</button>
	<button onclick="fanzhu()" class="btn">返回主页面</button>
	</div>
	</div>
</div>
</body>
</html>